Action Controls

Buttons

Data-bind Action's Presentation Name

Add <ActionColumn>_Label (deprecated <ActionColumn>_Presentation) column in ViewModel to be able to dynamically change a presentation text of action.

Default Buttons

Example Modifier-class
Button default.png
Button danger.png danger
Button warning.png warning
Button success.png success
Button info.png info

Outlined Buttons

Example Modifier-class
Outlined button default.png outlined
Outlined button danger.png outlined danger
Outlined button warning.png outlined warning
Outlined button success.png outlined success
Outlined button info.png outlined info

Text Buttons

Example Modifier-class
Text button default.png flat
Text button danger.png flat danger
Text button warning.png flat warning
Text button success.png flat success
Text button info.png flat info

Shaped Buttons

Example Modifier-class
Shaped button default.png shaped
Shaped button danger.png shaped danger
Shaped button warning.png shaped warning
Shaped button success.png shaped success
Shaped button info.png shaped info

Buttons With Icons

You can add an icon to your button. To do that, add the Tagged Value "Icon" to your ViewModelColumn which contains action. The value of the Tagged Value should be the icon name. We use Material Design icons as the default icons for the MDriven Turnkey application. Find the different icons on the following website: Icons - Material Design.

Go to Icons – Material Design and choose the icon you want to add to your button.

Choose an icon on the Material Design Icons website
Choose an icon on the Material Design Icons website

After you've chosen the icon you want to add to your button, click on the left bottom corner to expand the icon description. There you will be able to copy the name of the icon to the value of Tagged Value.

Copy the icon name to the value of TaggedValue "Icon"

NOTE: If the name is "Arrow back", you must probably use "arrow_back" - the MaterialDesign icon web page is not very clear on what name to use but the space is replaced with an underscore and no capitals in the names!

Add the name of the chosen icon to the TaggedValue value.

Also, you can choose the position of the icon with the help of TaggedValue – "IconPosition". (There are two available options: before or after. By default – before).

Example Description
Leading icon button.png Default presentation of a button with a leading icon
Icon after button.png Presentation of a button with an icon after the button text
Icon button.png Icon button without button text
Fab icon button.png Icon button with addition of modifier-class "fab"
This page was edited more than 6 months ago on 06/17/2024. What links here